<!-- 简历编辑页面 -->
<template>
  <div>
    <el-card style="width: 70%; margin: 0 auto; margin-top: 20px">
      <h1 style="text-align: center; font-size: 28px">个人简历管理</h1>
      <div style="border: 1px solid #efefef; padding: 20px">
        <div style="font-weight: bold; font-size: 20px">基本信息</div>
        <el-form
          :model="form"
          label-position="top"
          label-width="180px"
          style="margin-top: 20px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" style="width: 100%">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="意向岗位" style="width: 100%">
                <el-input v-model="form.intendPosition"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="性别" style="width: 100%">
                <el-radio-group v-model="form.gender">
                  <el-radio label="男" value="男"></el-radio>
                  <el-radio label="女" value="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期" style="width: 100%">
                <el-date-picker
                  v-model="form.birthDate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" style="width: 100%">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工作经验" style="width: 100%">
                <el-select
                  v-model="form.workYears"
                  placeholder="请选择工作经验"
                >
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="意向城市" style="width: 100%">
                <elui-china-area-dht
                  v-model="form.cityCode"
                  isall
                  :leave="2"
                  @change="onChange"
                  style="width: 100%"
                ></elui-china-area-dht>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="期望薪资（月薪/元）" style="width: 100%">
                <el-input
                  style="width: 48%"
                  v-model="form.intendSalaryMin"
                ></el-input
                >&nbsp;-&nbsp;
                <el-input
                  style="width: 48%"
                  v-model="form.intendSalaryMax"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历" style="width: 100%">
                <el-select v-model="form.qualification">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="电子邮箱" style="width: 100%">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="个人简介" style="width: 100%">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="form.personalProfile"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="border: 1px solid #efefef; padding: 20px; margin-top: 20px">
        <div style="font-weight: bold; font-size: 20px">
          工作经历
          <el-button
            style="float: right"
            type="primary"
            :icon="Plus"
            @click="addWorkJl"
            >添加工作经历</el-button
          >
        </div>
        <el-form
          :model="form1"
          label-position="top"
          label-width="180px"
          style="margin-top: 20px"
        >
          <div
            v-for="(i, index) in form1"
            :key="index"
            style="border: 1px solid #efefef; padding: 20px; margin-top: 20px"
          >
            <div style="display: flex; justify-content: flex-end">
              <el-icon
                v-if="index != 0"
                style="color: red; font-size: 20px; cursor: pointer"
                @click="deleteWorkJl(index)"
                ><CircleClose
              /></el-icon>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="开始时间" style="width: 100%">
                  <el-date-picker
                    v-model="form1[index].startTime"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" style="width: 100%">
                  <el-date-picker
                    v-model="form1[index].endTime"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="公司名称" style="width: 100%">
                  <el-input v-model="form1[index].companyName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位名称" style="width: 100%">
                  <el-input v-model="form1[index].workName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="工作内容" style="width: 100%">
                  <el-input
                    v-model="form1[index].content"
                    type="textarea"
                    :rows="4"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <el-button @click="save" style="margin: 20px 0; float: right"
        >保存</el-button
      >
    </el-card>
  </div>
</template>

<script setup>
import { EluiChinaAreaDht } from "elui-china-area-dht";
import { Plus, CircleClose } from "@element-plus/icons-vue";
import { options4, options3 } from "../Job/config";
import { reqAddResume, reqGetResumeDetail, reqUpdateResume } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/userInfo";
const userStore = useUserStore();
const router = useRouter();
const biographical = ref(null);
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;
const address = ref([]);
const form = ref({
  /**姓名 */
  realName: "",
  /**性别 */
  gender: "",
  /**出生日期 */
  birthDate: "",
  /**联系电话 */
  phone: "",
  /**意向岗位 */
  intendPosition: "",
  /**工作经验 */
  workYears: "",
  /**意向城市 */
  intendCity: "",
  /**城市区号 */
  cityCode: [],
  /**期望薪资期望薪资最小值 */
  intendSalaryMin: "",
  /**期望薪资最大值 */
  intendSalaryMax: "",
  /**学历 */
  qualification: "",
  /**邮箱 */
  email: "",
  /**个人简介 */
  personalProfile: "",
  /**个人经历 */
  workExperience: [],
});
/**工作经历 */
const form1 = ref([
  {
    startTime: "",
    endTime: "",
    companyName: "",
    workName: "",
    content: "",
  },
]);

const addWorkJl = () => {
  form1.value.push({
    startTime: "",
    endTime: "",
    companyName: "",
    workName: "",
    content: "",
  });
};

const deleteWorkJl = (index) => {
  form1.value.splice(index, 1);
};

const onChange = (e) => {
  address.value = [];
  console.log(e);
  e.forEach((element, index) => {
    if (element !== "all") address.value.push(chinaData[e[index]].label);
  });
  form.value.intendCity = address.value.join(",");
  console.log(address.value);
};

/**保存简历 */
const save = async () => {
  console.log(form1.value);
  console.log(form.value);
  form.value.cityCode = form.value.cityCode.join(",");
  form.value.workExperience = JSON.stringify(form1.value);
  console.log(form1.value);
  if (form.value.id) {
    const res = await reqUpdateResume(form.value);
    if (res.code == 200) {
      ElMessage.success("修改成功");
      router.push({
        path: "/works",
      });
    } else {
      ElMessage.error(res.msg);
    }
  } else {
    const res = await reqAddResume(form.value);
    if (res.code == 200) {
      ElMessage.success("修改成功");
      router.push({
        path: "/works",
      });
    } else {
      ElMessage.error(res.msg);
    }
  }
};

/**获取简历 */
const getBiographical = async () => {
  if (userStore.userInfo.id) {
    const res = await reqGetResumeDetail(userStore.userInfo.id);

    if (res.code == 200 && res.data) {
      form.value = res.data;
      form.value.cityCode = res.data.cityCode.split(",");
      // address.value = res.data.cityCode.split(",");
      form1.value = JSON.parse(res.data.workExperience);

      // console.log(form);
    }
  }
};

onMounted(() => {
  getBiographical();
});
</script>

<style lang="scss" scoped></style>
